<template>
  <div class="auth-status_box" :class="{'auth': hasAuth}" @click="toAuth">
    <div class="icon-box">
      <uni-icons
        type="checkmarkempty"
        size="8"
        :color="hasAuth ? '#FFFFFF' : '#959595'"
      ></uni-icons>
    </div>
    <uni-icons
      type="right"
      size="8"
      color="#959595"
      class="right-arrow"
      v-if="!hasAuth"
    ></uni-icons>
  </div>
  <AuthTeamPopup ref="authTeamPopup"/>
</template>

<script setup lang="ts">
import AuthTeamPopup from "@/components/activity-202405/AuthTeamPopup.vue";

const props = defineProps<{
  onlyShow: boolean
  hasAuth: boolean
}>()

const authTeamPopup = ref<InstanceType<typeof AuthTeamPopup>>();

/**
 * 点击团队认证的处理函数
 */
 const toAuth = () => {
  // 如果只展示，不做任何处理
  if(props.onlyShow) {
    return;
  }
  if(props.hasAuth) {
    return;
  }
  authTeamPopup.value?.open();
}
</script>

<style scoped lang="scss">
.auth-status_box {
  width: 117rpx;
  height: 35rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 15rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  .icon-box {
    width: 23rpx;
    height: 23rpx;
    border-radius: 50%;
    border: 2rpx solid #959595;
    text-align: center;
    line-height: 23rpx;
    position: absolute;
    left: 6rpx;
  }
  .right-arrow {
    position: absolute;
    right: 10rpx;
  }
  &::after {
    content: "未认证";
    display: block;
    position: absolute;
    left: 37rpx;
  }
  &.auth {
    color: #3082ff;
    background: rgba(69, 140, 242, 0.2);
    width: 96rpx;
    .icon-box {
      border: none;
      background: linear-gradient(180deg, #75b2ff, #3082ff 100%);
    }
    &::after {
      content: "已认证";
    }
  }
}
</style>
